
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
	<!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
     <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
        <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
     <!-- Google Fonts-->
   <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
    <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" ><i class="fa fa-gear"></i> <strong>学生成绩管理系统</strong></a>
            </div>

            <ul class="nav navbar-top-links navbar-right">
   
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a onclick= logout()><i class="fa fa-sign-out fa-fw"></i> 退出登录</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">

                    <li>
                        <a class="active-menu"><i class="fa fa-desktop"></i> 个人信息</a>
                    </li>
                    
                    <li>
                        <a  style="cursor:pointer" id = "b"><i class="fa fa-table" ></i> 成绩</a>
                    </li>
                    
                    <li>
                        <a  style="cursor:pointer" id = "c"><i class="fa fa-edit" ></i> 修改密码</a>
                    </li>

                </ul>

            </div>

        </nav>
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper" >
            <div id="page-inner">
			 <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            	个人信息 
                        </h1>
                    </div>
                </div> 
                 <!-- /. ROW  -->
				 
				
			<div class="row">

			  <div class="col-md-12">
			<div class="panel panel-default">
     							  
							<div class="panel-body"> 
                                <label>学号</label>
								<div class="alert alert-danger" id = "id">
                                </div>
                                <label>姓名</label>
								<div class="alert alert-success" id ="name">
                                </div>
                                <label>性别</label>
								<div class="alert alert-info" id = "sex">
                                </div>
                                <label>出生年份</label>
								<div class="alert alert-warning" id = "birth_year">
                                </div>
                                <label>籍贯</label>
								<div class="alert alert-danger" id = "province">
                                </div>
                                <label>专业</label>
								<div class="alert alert-info" id = "major_name">
                                </div>
                                <label>已修学分</label>
								<div class="alert alert-warning" id = "credits">
                                </div>
                                <label>已选课程数量</label>
								<div class="alert alert-success" id = "number_of_courses">
                                </div>
                                <label>加权平均分</label>
								<div class="alert alert-danger" id = "average_grade">
								</div>
							</div>
				</div>
			</div>						
				</div>								
									
                 <!-- /. ROW  -->
			
               
                <!-- /. ROW  -->

                 <!-- /. ROW  -->
                

                <!-- /. ROW  -->
			
				</div>
             <!-- /. PAGE INNER  -->
            </div>
         <!-- /. PAGE WRAPPER  -->
        </div>
     <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="assets/js/jquery-1.10.2.js"></script>
      <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
      <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>
    
    <script type="text/javascript">

        document.getElementById("b").onclick = function () {
            window.location.href = "Student_Scores.html";
        }
        document.getElementById("c").onclick = function () {
            window.location.href = "Student_ChangePassword.html";
        }

        function logout()
        {
            if (confirm("您确定退出吗？")) {  
                window.location.href = "Login.html";
            }             
        }
        
        var name = localStorage.getItem("name");

        // （1）创建异步对象
        var ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。
        ajaxObj.open('get', "/student/information?student_id="+name);

        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);

                var last=ajaxObj.responseText; //将JSON对象转化为JSON字符
                
                var obj = JSON.parse(last);

                document.getElementById("id").innerHTML = obj.student_id;
                document.getElementById("name").innerHTML = obj.student_name;
                document.getElementById("sex").innerHTML = obj.sex;
                document.getElementById("birth_year").innerHTML = obj.birth_year;
                document.getElementById("province").innerHTML = obj.province;
                document.getElementById("major_name").innerHTML = obj.major_name;
                document.getElementById("credits").innerHTML = obj.credits;
                document.getElementById("number_of_courses").innerHTML = obj.number_of_courses;
                document.getElementById("average_grade").innerHTML = obj.average_grade;
            }
            else if(ajaxObj.readyState == 4 && ajaxObj.status == 404) {
				var last=ajaxObj.responseText; //将JSON对象转化为JSON字符
				var obj = JSON.parse(last);
				alert(obj.error);
            }
        }
        
	</script>
 
</body>
</html>
